<template>
  <up-sticky>
    <up-navbar :bg-color="bgColor" :placeholder="true">
      <template #left>
        <slot name="left">
          <uni-icons v-if="showBack" @click="goBack" type="left" size="32rpx" color="white"></uni-icons>
          <view v-else></view>
        </slot>
      </template>
      <template #center>
        <slot name="center">
          <text class="navbar-title">{{ props.title }}</text>
        </slot>
      </template>
      <template #right>
        <slot name="right"></slot>
      </template>
    </up-navbar>
  </up-sticky>
</template>

<script setup>
import UniIcons from "@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue";

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  bgColor: {
    type: String,
    default: '#01b5b2'
  },
  showBack: {
    type: Boolean,
    default: true
  },
  backUrl: {
    type: String,
    default: ''
  },
  backType: {
    type: String,
    default: ''
  }
})

function goBack() {
  if (props.backUrl) {
    if (!props.backType || props.backType === 'navigateBack') {
      uni.navigateBack({
        delta: 1
      })
    } else if (props.backType === 'navigateTo') {
      uni.navigateTo({
        url: props.backUrl
      })
    } else if (props.backType === 'redirectTo') {
      uni.redirectTo({
        url: props.backUrl
      })
    } else if (props.backType === 'reLaunch') {
      uni.reLaunch({
        url: props.backUrl
      })
    } else if (props.backType === 'switchTab') {
      uni.switchTab({
        url: props.backUrl
      })
    }
  } else {
    uni.navigateBack({
      delta: 1
    })
  }
}
</script>

<style scoped>
.navbar-title {
  font-weight: bold;
  font-size: 16px;
  color: white;
}
</style>
